<template>
	<view>
		<!--头部-->
		<view class="navbarbox">
			<view class="navbar">
				<view class="navbartitle" @click="currentdata(1)" :class="currentIndex==1?'navbartitle-in':''">抓取订单
				</view>
				<view class="navbartitle" @click="currentdata(2)" :class="currentIndex==2?'navbartitle-in':''">兑换订单
				</view>
				<image @click="cancela" class="navbarimage" src="../../static/icon/lefticon.png"></image>
			</view>
			<view class="navbarview">
				<view class="navbarrow">
					<view class="navbarli" @click="itemdata(0)" :class="itemindex==0?'navbarli-in':''">全部</view>
					<view class="navbarli" @click="itemdata(1)" :class="itemindex==1?'navbarli-in':''">待发货</view>
					<view class="navbarli" @click="itemdata(2)" :class="itemindex==2?'navbarli-in':''">待收货</view>
					<view class="navbarli" @click="itemdata(3)" :class="itemindex==3?'navbarli-in':''">已重发</view>
					<view class="navbarli" @click="itemdata(4)" :class="itemindex==4?'navbarli-in':''">已完成</view>
					<view class='databox-av'
						:style='itemindex == 0 ? "left:7%;" : "" || itemindex == 1 ? "left:27%;" : "" || itemindex == 2 ? "left:47%;" : "" || itemindex == 3 ? "left:67%;" : "" || itemindex == 4 ? "left:87%;" : ""'>
					</view>
				</view>
			</view>
		</view>


		<!-- 数据列表 -->
		<view class="listbox">
			<view v-for="(item,index) in dataList" class="listview" @click="details(item.id)">
				<view class="number flex al">
					<view>订单号：</view>
					<view>{{item.openid}}</view>
				</view>
				<view v-for="(itema,indexa) in item.commodity" class="listzhi flex">
					<view class="listimage">
						<image :src="itema.picture">
						</image>
					</view>
					<view class="listtext">
						<view class="listtitle">{{itema.commodity_name}}</view>
					</view>
					<view style="flex: 1;"></view>
					<view style="color:#464646;margin-top: 20rpx;font-size: 28rpx;">x1</view>
				</view>
				<view class="listpirce flex al">
					<view style="color:##A5A5A5;font-size:30rpx;">共{{item.commodity.length}}个娃娃，运费：</view>
					<view style="color:##A5A5A5;font-size:30rpx;">免运费</view>
				</view>
				<view class="listpirce">
					<view v-if="itemindex==2 || itemindex==4" class="listpiborder" style="margin-right: 20rpx;"
						@click.stop="logistics(item.id)">查看物流</view>
					<view v-if="itemindex==0 || itemindex==1" class="listpiborder" style="margin-right: 20rpx;"
						@click.stop="change">修改地址</view>
					<view class="listpiborder">联系客服</view>
				</view>
			</view>
		</view>

		<!-- 上拉加载数据 -->
		<view class="loadmore">
			<view v-if="load" class="loading-more">
				<view class="more-bottom-line" style="display: flex;">
					<view class="more-loading"></view>
					<text class="more-lineTxt">正在加载...</text>
				</view>
			</view>
			<view v-if="nomore==false" class="more-finish">
				<view class="more-bottom-line">
					<view class="more-line"></view>
					<text class="more-lineTxt">暂无更多了~</text>
					<view class="more-line"></view>
				</view>
			</view>
		</view>

		<!-- 暂无订单 -->
		<view v-if="nodata==true" class="nodatabox">
			<image style="width: 230rpx;" mode="widthFix" src="../../static/icon/aa/nodata.png"></image>
			<view class="nodatatext">暂无订单</view>
			<view class="nodataborder" @click="quzhua">去抓娃娃</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				currentIndex: 1,
				itemindex: 0,
				dataList: [],
				statusvalue: '',
				pageIndex: 1,
				load: true,
				nomore: true,
				nodata: false,
				hasMore: false,
			}
		},

		onLoad(e) {
			this.listorderdata()
			this.itemindex = e.itemindex || 0
		},

		// 上拉触底事件
		onReachBottom: function() {
			var that = this
			if (that.hasMore) {
				that.datalist() //调用函数
			}
		},

		methods: {
			//查看物流
			logistics(e) {
				var id = e
				uni.navigateTo({
					url: '/pages/viewlogistics/viewlogistics?id=' + id
				})
			},

			//修改地址
			change(e) {

			},

			//跳转订单详情
			details(e) {
				var id = e
				uni.navigateTo({
					url: '/pages/orderdetails/orderdetails?id=' + id
				})
			},

			//请求数据列表
			async listorderdata(e) {
				let apply = await request(`${getApp().globalData.http}user/list_order`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					page_num: this.pageIndex,
					page_size: 10,
					status: this.statusvalue,
					cls: this.currentIndex,
				})
				this.dataList = this.dataList.concat(apply.data.data)
				// 上拉加载数据
				if (apply.data.page_num == apply.data.total_num) {
					this.hasMore = false
				} else {
					this.hasMore = true
				}
				if (apply.data.data.length == 0) {
					this.nomore = true
					this.nodata = true
				}
				if (apply.data.data.length !== 0) {
					this.nomore = true
					this.nodata = false
				}
				if (this.hasMore) {
					this.pageIndex = this.pageIndex + 1
				} else {
					this.load = false
					if (apply.data.data.length == 0) {
						this.nomore = true
					} else {
						this.nomore = false
					}
				}
			},

			//返回上一页
			cancela(e) {
				uni.navigateBack({
					dalta: 1,
				})
			},

			//返回首页
			quzhua(e) {
				uni.reLaunch({
					url: '../home/home'
				})
			},

			//点击抓取订单和兑换订单
			currentdata(e) {
				// 防止重复点击
				if (this.currentIndex == e) {
					return
				}

				this.load = true
				this.nomore = true
				this.nodata = false
				this.hasMore = false

				this.pageIndex = 1
				this.dataList = []
				this.currentIndex = e
				this.listorderdata()
			},

			//点击分类
			itemdata(e) {
				// 防止重复点击
				if (this.itemindex == e) {
					return
				}

				this.load = true
				this.nomore = true
				this.nodata = false
				this.hasMore = false

				this.itemindex = e
				if (e == 0) {
					this.statusvalue = ''
				} else if (e == 1) {
					this.statusvalue = 1
				} else if (e == 2) {
					this.statusvalue = 2
				} else if (e == 3) {
					this.statusvalue = 4
				} else {
					this.statusvalue = 3
				}
				this.pageIndex = 1
				this.dataList = []
				this.listorderdata()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F1F5;
	}

	// 头部
	.navbarbox {
		background-color: #ffffff;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.navbar {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.navbartitle {
		color: #73747B;
		font-size: 32rpx;
		font-weight: 700;
		padding: 0 45rpx;
	}

	.navbartitle-in {
		color: #161723;
		font-size: 34rpx;
	}

	.navbarimage {
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		top: 30rpx;
		left: 20rpx;
	}

	.navbarrow {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.navbarli {
		width: 25%;
		line-height: 60rpx;
		text-align: center;
		color: #73747B;
		font-size: 30rpx;
	}

	.navbarli-in {
		color: #161723;
		font-size: 31rpx;
		font-weight: 600;
	}

	.databox-av {
		position: absolute;
		bottom: 19rpx;
		width: 6%;
		height: 8rpx;
		background-color: #353535;
		border-radius: 30px;
		transition: all 500ms;
		left: 7%;
	}

	// 暂无订单
	.nodatabox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 188rpx;
	}

	.nodatatext {
		font-size: 28rpx;
		color: #878787;
		margin: 20rpx 0;
	}

	.nodataborder {
		border: 1px solid #e5e5e5;
		font-size: 28rpx;
		color: #353535;
		padding: 15rpx 50rpx;
		border-radius: 50rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	// 数据列表
	.listview {
		margin: 20rpx 20rpx;
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.number {
		font-size: 29rpx;
		color: #161723;
	}

	.listzhi {
		margin-top: 25rpx;
		margin-bottom: 25rpx;
	}

	.listimage {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #F2F1F5;
	}

	.listimage image {
		width: 100%;
		height: 100%;
	}

	.listtext {
		width: 450rpx;
		margin-left: 20rpx;
	}

	.listtitle {
		height: 100rpx;
		font-size: 28rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.listpirce {
		display: flex;
		justify-content: flex-end;
	}

	.listpiborder {
		width: 160rpx;
		height: 70rpx;
		border: 1rpx solid #A6A7AA;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 15rpx;
		color: #171824;
		font-size: 30rpx;
		margin-top: 30rpx;
	}
</style>